<!-- 车型添加 -->
<template>
  <div>
    <el-dialog
      :title="titleInfo.text"
      :visible.sync="dialogFormVisible"
      width="600px"
    >
      <el-form
        ref="dataForm"
        label-position="right"
        label-width="110px"
        style="width: 100%"
        :model="formBase"
        :rules="ruleInCarModel"
      >
        <el-form-item
          label="车辆类型"
          prop="name"
        >
          <el-input
            v-model="formBase.name"
            placeholder="请输入车辆类型"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="应载重量"
          prop="allowableLoad"
        >
          <el-input
            v-model="formBase.allowableLoad"
            placeholder="请输入车型重量"
          >
            <span
              slot="suffix"
              style="
                color: #20232a;
                font-weight: 400;
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Regular;
                margin-right: 14px;
              "
            >吨</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="应载体积"
          prop="allowableVolume"
        >
          <el-input
            v-model="formBase.allowableVolume"
            placeholder="请输入车型体积"
          >
            <span
              slot="suffix"
              style="
                color: #20232a;
                font-weight: 400;
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Regular;
                margin-right: 14px;
              "
            >立方</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="长"
        >
          <el-input
            v-model="formBase.measureLong"
          >
            <span
              slot="suffix"
              style="
                color: #20232a;
                font-weight: 400;
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Regular;
                margin-right: 14px;
              "
            >米</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="宽"
        >
          <el-input
            v-model="formBase.measureWidth"
          >
            <span
              slot="suffix"
              style="
                color: #20232a;
                font-weight: 400;
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Regular;
                margin-right: 14px;
              "
            >米</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="高"
        >
          <el-input
            v-model="formBase.measureHigh"
          >
            <span
              slot="suffix"
              style="
                color: #20232a;
                font-weight: 400;
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Regular;
                margin-right: 14px;
              "
            >米</span>
          </el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button
          class="save-btn"
          @click="submitFn"
        >确认</el-button>
        <el-button
          class="cancel-btn"
          @click="dialogFormH"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { add, update } from '@/api/transit'

export default {
  name: 'CarModelsAdd',
  props: {
    titleInfo: {
      type: Object,
      required: true
    },
    formBase: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      // 校验规则
      ruleInCarModel: {
        name: [
          {
            required: true,
            message: '车辆类型不能为空',
            trigger: 'blur'
          }
        ],
        allowableLoad: [
          {
            required: true,
            message: '应载重量不能为空',
            trigger: 'blur'
          },
          {
            pattern: /^(?:[1-9]|[1-9]\d|100)$/,
            message: '只能输入1-100之间的正整数，请重新输入',
            trigger: 'blur'
          }
        ],
        allowableVolume: [
          {
            required: true,
            message: '应载体积不能为空',
            trigger: 'blur'
          },
          {
            pattern: /^(?:[1-9]|[1-9]\d|100)$/,
            message: '只能输入1-100之间的正整数，请重新输入',
            trigger: 'blur'
          }
        ]
      },
      flag: true // 防止重复点击生成一下生成很多条相同的数据
    }
  },
  methods: {
    // 弹层显示
    dialogFormV() {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH() {
      this.dialogFormVisible = false
      this.$refs['dataForm'].resetFields()
    },
    // 提交函数
    submitFn() {
      if (!this.flag) {
        return
      }
      this.flag = false
      // 等待校验规则是否合规
      this.$refs.dataForm.validate(async (valid) => {
        if (valid) {
          const data = {
            name: this.formBase.name,
            allowableLoad: Number(this.formBase.allowableLoad),
            allowableVolume: Number(this.formBase.allowableVolume),
            measureLong: Number(this.formBase.measureLong),
            measureWidth: Number(this.formBase.measureWidth),
            measureHigh: Number(this.formBase.measureHigh)
          }
          if (this.formBase.id) {
            // 编辑
            await update(this.formBase.id, data).then((res) => {
              if (String(res.code) === '200') {
                this.$message.success('车型修改成功')
                // 通知父组件
                this.$emit('newDataes', this.formBase)
              } else {
                this.$message.error(res.msg || '车型修改失败')
              }
            }).catch((err) => {
              this.$message.error(err.msg || '车型修改失败')
            })
          } else {
            // 新增
            await add(data).then((res) => {
              if (String(res.code) === '200') {
                console.log(res)
                this.$message.success('新增车型成功！')
              } else {
                this.$message.error(res.msg || '新增车型失败')
              }
            }).catch((err) => {
              this.$message.error(err.msg || '新增车型失败')
            })
          }

          // 通知父组件
          this.$emit('newDataes')
          // 关闭弹窗
          this.dialogFormH()
          this.flag = true
        } else {
          this.flag = true
          this.$message.error('请按照提示填写')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  .save-btn{
      background-color: #e15536;
      border: 1px solid #e15536;
      color: #fff;
    }
    .save-btn:hover{
      background-color: #ffab98;
      border: 1px solid #ffab98;
    }
}
</style>
